<template>
  <div class="table-container warning-table">
    <el-table
      :data="tableData"
      @row-click="skipAssistingDecisionMaking"
      :row-style="{ height: '50px' }"
      :cell-style="{ padding: '0px' }"
      ref="scrollTable"
    >
      <el-table-column prop="occurrenceTime" label="时间" min-width="125" align="left" show-overflow-tooltip />
      <el-table-column prop="typeName" label="类型" min-width="100" show-overflow-tooltip />
      <el-table-column prop="warningLevel" label="级别" min-width="90">
        <template #default="scope">
          <span :class="getWarningLevelClass(scope.row.warningLevel)">
            {{ getWarningLevelText(scope.row.warningLevel) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="occurrenceAddress" label="位置" min-width="140" show-overflow-tooltip />
      <el-table-column prop="statusName" label="处置状态" align="left" min-width="100" show-overflow-tooltip>
        <template #default="scope">
          <span :class="getStatusClass(scope.row.statusName)">
            {{ scope.row.statusName }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { TableRow } from '@/store/modules/earlyWarning/useIncidentDispositionStore';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';

const props = defineProps<{
  tableData: TableRow[];
}>();

const emit = defineEmits<{
  (e: 'goRiskDetection', row: TableRow, title: string): void;
}>();

const skipAssistingDecisionMaking = (row: TableRow) => {
  emit('goRiskDetection', row, COMPONENT_TITLES.INCIDENT_DISPOSITION);
};

const getWarningLevelClass = (level: string) => {
  return {
    'warning-level-1': level === '1',
    'warning-level-2': level === '2',
    'warning-level-3': level === '3',
    'warning-level-4': level === '4'
  };
};

const getWarningLevelText = (level: string) => {
  const levels = {
    '1': '特别严重',
    '2': '严重',
    '3': '较重',
    '4': '一般'
  };
  return levels[level as keyof typeof levels] || level;
};

const getStatusClass = (status: string) => {
  return {
    'status-pending': status === '待处置',
    'status-processing': status === '处置中',
    'status-completed': status === '已处置'
  };
};
</script>

<style scoped lang="scss">
.table-container.warning-table {
  width: 24rem;
  height: 100%;

  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    /* 全局样式中 */
    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    /* Scrollbar styles */
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  /* Status and warning level colors */
  .warning-level-1 {
    color: #ff7070;
  }

  .warning-level-2 {
    color: #ffb444;
  }

  .warning-level-3 {
    color: #fff780;
  }

  .warning-level-4 {
    color: #00ffff;
  }

  .status-pending {
    color: #ff7070;
  }

  .status-processing {
    color: #fff780;
  }

  .status-completed {
    color: #00ffff;
  }
}

@media (min-width: 3840px) {
  .table-container {
    width: 28rem !important;
  }
}
</style>
